<template>
	<view class="tabs">
		<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false"
			:scroll-into-view="scrollInto">
			<view v-for="(item,index) in classList" :key="item.id" class="uni-tab-item" :id="item.index"
				:data-current="index" @click="ontabtap">
				<text class="uni-tab-item-title"
					:class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{item.label}}</text>
				<text class="uni-tab-item-border" v-if="tabIndex==index"></text>
				<label class="new-tag" v-if="item.isNew"></label>
			</view>
		</scroll-view>
		<swiper :current="tabIndex" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange">
			<swiper-item class="swiper-item" v-for="(tab,index1) in newsList" :key="index1">
				<scroll-view class="scroll-v list" enableBackToTop="true" scroll-y @scrolltolower="loadMore(index1)">
					<view class="list-empty" v-if="tab.data.length==0">
						<image class="list-empty-bg" src="../../static/images/img_list_empty@3x.png"></image>
						<label class="list-empty-label">啊哦~ 还没有任务记录</label>
					</view>
					<view v-else v-for="(newsitem,index2) in tab.data" :key="newsitem.id">
						<TaskItem :options="newsitem" @click="goDetail(newsitem)"></TaskItem>
					</view>
					<view class="loading-more" v-if="tab.isLoading || tab.data.length > 4">
						<text class="loading-more-text">{{tab.loadingText}}</text>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import TaskItem from '../../components/task-item.vue'

	// 缓存每页最多
	const MAX_CACHE_DATA = 100;
	// 缓存页签数量
	const MAX_CACHE_PAGE = 3;

	export default {
		components: {
			TaskItem
		},
		data() {
			return {
				queryId: 0, // 传过来的值
				tabIndex: 0, //当前选中index
				newsList: [],
				cacheTab: [],
				classList: [],
				scrollInto: "",
			}
		},
		onLoad(option) {
			this.queryId = option.id;
			this.getClassList();
		},
		methods: {
			getClassList() {
				//调接口 取分类数据
				this.classList = [{
					id: 0,
					index: "class_" + 0,
					label: "全部",
				}, {
					id: 1,
					index: "class_" + 1,
					label: "已报名",
					isNew: true,
				}, {
					id: 2,
					index: "class_" + 2,
					label: "进行中",
				}, {
					id: 3,
					index: "class_" + 3,
					label: "待审核",
				}, {
					id: 4,
					index: "class_" + 4,
					label: "已完成",
				}]
				var tabIndex = 0;
				this.classList.forEach((item, i) => {
					this.newsList.push({
						data: [],
						isLoading: false,
						refreshText: "",
						loadingText: '加载更多...'
					});
					if (item.id == this.queryId) {
						tabIndex = i;
					}
				});
				this.switchTab(tabIndex);
			},
			getList(index) {
				let activeTab = this.newsList[index];
				let list = [{
					id: this.newGuid(),
					title: "公司兼职银行业务员",
					userName: "刘小云",
					company: "成都壹贰叁文化有限公司",
					time: "2021-07-28",
					tag: "default", //标签设置名字或者改为设置type
					tagLabel: "不合适"
				}, {
					id: this.newGuid(),
					title: "暑假兼职问卷调查",
					userName: "刘小云",
					company: "成都壹贰叁文化有限公司",
					time: "2021-07-28",
					tag: "blue", //标签设置名字或者改为设置type
					tagLabel: "招聘中",
					tips: "已停止招聘"
				}, {
					id: this.newGuid(),
					title: "暑假兼职问卷调查",
					userName: "刘小云",
					company: "成都壹贰叁文化有限公司",
					time: "2021-07-28",
					tag: "red", //标签设置名字或者改为设置type
					tagLabel: "进行中"
				}, {
					id: this.newGuid(),
					title: "暑假兼职问卷调查",
					userName: "刘小云",
					company: "成都壹贰叁文化有限公司",
					time: "2021-07-28",
					tag: "orange", //标签设置名字或者改为设置type
					tagLabel: "待审核"
				}, {
					id: this.newGuid(),
					title: "暑假兼职问卷调查",
					userName: "刘小云",
					company: "成都壹贰叁文化有限公司",
					time: "2021-07-28",
					tag: "green", //标签设置名字或者改为设置type
					tagLabel: "待评价"
				}, {
					id: this.newGuid(),
					title: "公司兼职银行业务员",
					userName: "刘小云",
					company: "成都壹贰叁文化有限公司",
					time: "2021-07-28",
					tag: "grey", //标签设置名字或者改为设置type
					tagLabel: "已完成"
				}];
				activeTab.data = activeTab.data.concat(list);
				this.$forceUpdate()
			},
			goDetail(e) {
				uni.navigateTo({
					url: './demandDetail?id=' + e.id
				});
			},
			loadMore(e) {
				setTimeout(() => {
					this.getList(this.tabIndex);
				}, 500)
			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index);
			},
			ontabchange(e) {
				let index = e.target.current || e.detail.current;
				this.switchTab(index);
			},
			switchTab(index) {
				if (this.newsList[index].data.length === 0) {
					this.getList(index);
				}

				if (this.tabIndex === index) {
					return;
				}

				// 缓存 tabId
				if (this.newsList[this.tabIndex].data.length > MAX_CACHE_DATA) {
					let isExist = this.cacheTab.indexOf(this.tabIndex);
					if (isExist < 0) {
						this.cacheTab.push(this.tabIndex);
						//console.log("cache index:: " + this.tabIndex);
					}
				}

				this.tabIndex = index;
				this.scrollInto = this.classList[index].index;

				// 释放 tabId
				if (this.cacheTab.length > MAX_CACHE_PAGE) {
					let cacheIndex = this.cacheTab[0];
					this.clearTabData(cacheIndex);
					this.cacheTab.splice(0, 1);
					//console.log("remove cache index:: " + cacheIndex);
				}

				uni.setNavigationBarTitle({
					title: this.classList[index].label
				});
			},
			clearTabData(e) {
				this.newsList[e].data.length = 0;
				this.newsList[e].loadingText = "加载更多...";
			},
			newGuid() {
				let s4 = function() {
					return (65536 * (1 + Math.random()) | 0).toString(16).substring(1);
				}
				return (s4() + s4() + "-" + s4() + "-4" + s4().substr(0, 3) + "-" + s4() + "-" + s4() + s4() + s4())
					.toUpperCase();
			}
		}
	}
</script>

<style>
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	/* #endif */

	.tabs {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.scroll-h {
		width: 750rpx;
		/* #ifdef H5 */
		width: 100%;
		/* #endif */
		height: 80rpx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* flex-wrap: nowrap; */
		/* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}

	.line-h {
		height: 1rpx;
		background-color: #cccccc;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
		position: relative;
	}

	.uni-tab-item-title {
		color: #7B7B7B;
		font-size: 28rpx;
		height: 66rpx;
		line-height: 66rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #181818;
		font-size: 30rpx;
		font-weight: 500;
	}

	.new-tag {
		width: 14rpx;
		height: 14rpx;
		background: #FA5151;
		border-radius: 50%;
		position: absolute;
		right: 22rpx;
		top: 12rpx;
	}

	.uni-tab-item-border {
		width: 36rpx;
		height: 2rpx;
		background-color: #1371FF;
		display: block;
		margin: 0 auto;
	}

	.swiper-box {
		flex: 1;
		margin: 32rpx 32rpx 0;
	}

	.swiper-item {
		display: flex;
		flex: 1;
		flex-direction: row;
	}

	.scroll-v {
		display: flex;
		flex: 1;
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750rpx;
		width: 100%;
	}

	.update-tips {
		position: absolute;
		left: 0;
		top: 41rpx;
		right: 0;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		background-color: #FDDD9B;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.update-tips-text {
		font-size: 14rpx;
		color: #ffffff;
	}

	.refresh {
		width: 750rpx;
		width: 100%;
		height: 64rpx;
		justify-content: center;
	}

	.refresh-view {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	.refresh-icon {
		width: 30rpx;
		height: 30rpx;
		transition-duration: .5s;
		transition-property: transform;
		transform: rotate(0deg);
		transform-origin: 15rpx 15rpx;
	}

	.refresh-icon-active {
		transform: rotate(180deg);
	}

	.loading-icon {
		width: 20rpx;
		height: 20rpx;
		margin-right: 5rpx;
		color: #999999;
	}

	.loading-text {
		margin-left: 2rpx;
		font-size: 16rpx;
		color: #999999;
	}

	.list-empty {
		background-color: #FFFFFF;
		border-radius: 16rpx 16rpx 0px 0px;
		text-align: center;
		padding-top: 48rpx;
		padding-bottom: 88rpx;
		width: 100%;
		position: absolute;
		top: 25%;
	}

	.list-empty-bg {
		width: 228rpx;
		height: 164rpx;
		display: block;
		margin: 0 auto 30rpx auto;
	}

	.list-empty-label {
		font-size: 22rpx;
		color: #ACACAC;
	}
</style>
